<template>
    <div class="top-navigation">
        <div class="top-bg" @click="toSystem">
            <span>苏信科技数字孪生平台</span>
        </div>
        <!-- <div class="top-text1 business bg-img">
            <span>系统首页</span>
        </div>
        <div class="top-text2 business bg-img">
            <span>设备监控</span>
        </div>
        <div class="top-text3 business bg-img">
            <span>数据分析</span>
        </div>
        <div class="top-text4 business bg-img">
            <span>系统设置</span>
        </div> -->

        <!-- 时间盒子-->
        <div class="time-box">
            <span>{{ state.currentTime }}</span>
            <span class="ml14">星期五</span>
            <el-icon class="ml14">
                <FullScreen/>
            </el-icon>
            <!-- 下拉菜单 -->
            <el-dropdown class="dropdown_clas">
                <span class="admin flex-row-center ml12">
                     管理员
                    <SvgIcon class="ml2" name="ArrowDown"/>
                </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="router.push('/')">首页</el-dropdown-item>
                            <el-dropdown-item @click="router.push('/401')">修改密码</el-dropdown-item>
                            <el-dropdown-item @click="authStore.userLogout()" divided>退出系统</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup>
  import dayjs from "dayjs";
  import {onBeforeUnmount, onMounted, reactive} from "vue";
  import { useRouter } from 'vue-router';
  //路由控制器
  const router = useRouter();

  const state = reactive({
        timer: '',
        currentTime: "",
    });

    onMounted(() => {
        state.timer = setInterval(() => {
            state.currentTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
        }, 1000);
    });

    onBeforeUnmount(() => {
      console.log("离开页面前销毁定时器")
        /* 离开页面前销毁定时器 */
        if (state.timer) {
            clearInterval(state.timer);
        }
    });

    function toSystem(){
        router.push('/config');
    }

</script>

<style lang="scss" scoped>
    .dropdown_clas{
        font-size: 16px;
    }
    .time-box {
        display: flex;
        position: absolute;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        top: 4%;
        right: 1%;
        font-size: 16px;
        text-shadow: var(--mxg-color-text-shadow) 3px 2px 3px;
        .admin {
            color: #fff;

        }
    }

    .bg-img {
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .business {
        width: 10%;
        position: absolute;
        top: 17%;
        font-size: 20px;
        padding: 10px;
        text-align: center;
    }

    .top-text1 {
        left: 3%;
        background-image: url("@/assets/imgs/button-left.png");
    }

    .top-text2 {
        left: 16%;
        background-image: url("@/assets/imgs/button-left.png");
    }

    .top-text3 {
        right: 3%;
        background-image: url("@/assets/imgs/button-right.png");
    }

    .top-text4 {
        right: 16%;
        background-image: url("@/assets/imgs/button-right.png");
    }

    .top-bg {
        cursor: pointer;
        text-align: center;
        text-shadow:  var(--mxg-color-text-shadow) 3px 2px 3px;
        font-weight: bold;
        font-size: 260%;
        span{
            margin-top: 1vh;
            display: inline-block;
        }
    }

    .top-navigation {
        color: #fff;
        position: relative;
        min-height: 8%;
        background-repeat: no-repeat;
        background-image: url("@/assets/imgs/ed2948dd5d3d589f3e19bf720f5c73a.png");
        background-size: 100% 100%;
    }
</style>
